<template>
  <div>
    <div class="bg">
      <div class="section" v-for="(item, index) in list" :key="index">
        <div class="item_wrapper">
          <img :src="item.image" alt="">
          <div class="name">{{ item.name }}</div>
          <div class="detail">{{ item.paramText }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getNewData } from "@/api/front-home.js";

export default {
  name: "ServiceAgreement",
  props: {

  },
  components: {

  },
  data() {
    return {
      list: [],
      total: 0,
      listQuery: {
        code: 'partner',
        pageNo: 1,
        pageSize: 20
      },
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    getData() {
      getNewData(this.listQuery).then(res => {
        this.list = res.list
      })
      .catch((err) => {
        
      })
    }
  },
  created() {
    window.document.title = '城市合伙人'
    this.getData()
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {
    this.$nextTick(() => {
      let imgList = document.querySelectorAll(".item_wrapper img")
      if (imgList && imgList.length > 0) {
        imgList.forEach(img => {
          img.style.height = img.getBoundingClientRect().width + 'px';
        });
      }
    })
  },
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>
  .bg {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-evenly;

  }

  .section {
    position: relative;
    margin-bottom: 10px;
    width: 50%;
    background-color: white;

    .item_wrapper {
      position: relative;
      margin: 0 10px 0 10px;
      padding-bottom: 10px;
      background-color: rgb(245, 245, 245);

      img {
        width: 100%;
      }

      .name {
        margin: 10px 7px 0 7px;
        height: 20px;
        font-size: 14px;
        line-height: 20px;
        color: black;
        font-weight: 500;
      }

      .detail {
        margin: 6px 8px 0px 8px;
        height: 34px;
        font-size: 12px;
        line-height: 17px;
        color: rgb(51, 51, 51);
        font-weight: 400;
        @include ellipsis($line: 2);
      }
    }
  }
</style>